// ====================================================== 基础控件 ====================================================== //
interface HTMLElement {
    /** 创建控件元素的控件实例 */
    creator: _CP_<any> | undefined;
}

/**
 * 控件基类
 * @description 模版类
 * @param <T> 子控件补充参数类型
 */
abstract class _CP_<T extends object> extends Coverloading<T> {

    /** 通用参数处理器 */
    public static OPTIONS_HANDLER = new Map().set('function', {
        [Etype.function]: U.F.fn.obj,
        [Etype.string]: (value: string) => {
            const fn = Object.prototype.hasOwnProperty.call(globalThis, value);
            if (fn) { return fn; }
            return DEFAULT;
        },
    });

    /** 通用样式 */
    public static CLASSES = {
        PLUGIN: 'plugin',
        VALUE_PLUGIN: 'value-plugin',
        DISABLED: 'disabled',
        READONLY: 'readonly',
        INPUTER: 'inputer',
        CONTROLS: 'controls',
    };

    public constructor(...args: Array<any>) {
        super(...args);

        // ==================================== 创建元素 ==================================== //
        // 创建顶级标签
        const ele = U.D.createElement(this.topTag())
            .addClass(_CP_.CLASSES.PLUGIN)
            .addClass(this.constructor.name)
            .addClass(this.className());

        // 双向绑定数据
        ele.ele()!.creator = this;
        this.ele = ele;

        // 控件初始化实现
        this.initializer();

        // 控件初始化后实现
        this.afterInitializer();
    }

    // ====================================================== 创建实例对象 ====================================================== //
    /** 顶级元素名 */
    protected topTag(): string { return 'div'; };

    /** 额外样式 */
    protected className(): string { return ''; };

    /**
     * 控件元素
     */
    public ele: KHTMLElement;

    /** 
     * 控件初始化实现
     */
    protected abstract initializer(): void;

    /** 
     * 控件初始化后实现
     */
    protected abstract afterInitializer(): void;
}

/**
 * 事件回调方法
 */
type Tevent_callback = (this: KHTMLElement, event: MouseEvent) => void;
